<template>
    <div class="wrap">
        <split-pane :min-percent='7' :default-percent='40' split="vertical">
            <template slot="paneL">
                <!-- 编辑自己的代码 -->
                <div class="paneL"></div>
            </template>
            <template slot="paneR">
                <!-- 编辑自己的代码 -->
                <div class="paneR">
                    <split-pane split="horizontal" :min-percent='27' :default-percent='60'>
                        <template slot="paneL">
                            <div class="a"></div>
                        </template>
                        <template slot="paneR">
                            <div class="b"></div>
                        </template>
                    </split-pane>
                </div>
            </template>
        </split-pane>

    </div>
</template>
<script>
export default {
    methods: {

    },
}
</script>

<style lang="scss" scoped>
.a {
    background-color: yellow;
    height: 100%;
    width: 100%;
}

.b {
    background-color: green;
    height: 100%;
    width: 100%;
}

.wrap {
    height: 100vh;

    .paneL {
        background-color: red;
        height: 100%;
        width: 100%;
    }

    .paneR {
        background-color: pink;
        height: 100%;
        width: 100%;
    }
}
</style>
